<!DOCTYPE html>
<html>

<head>
  <title>我的博客</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f5f5f5;
    }

    h1 {
      color: #333;
      border-bottom: 3px solid #4CAF50;
      padding-bottom: 10px;
    }

    .post {
      background: white;
      padding: 20px;
      margin: 20px 0;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .post h2 {
      color: #4CAF50;
      margin-top: 0;
    }

    .post h2 a {
      color: #4CAF50;
      text-decoration: none;
    }

    .post h2 a:hover {
      text-decoration: underline;
    }

    .date {
      color: #888;
      font-size: 0.9em;
    }

    .content {
      line-height: 1.6;
      color: #444;
    }
  </style>
</head>

<body>
  <h1>欢迎来到我的博客</h1>
  {% for post in posts %}
  <div class="post">
    <h2><a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}</a></h2>
    <p class="date">发布时间: {{ post.published_date }}</p>
    <p class="content">{{ post.content|truncatewords:30 }}</p>
  </div>
  {% empty %}
  <p>暂无博客文章</p>
  {% endfor %}
</body>

</html>